<template>
 <div class="header">
   <div class="header-left"><div class="iconfont return-icon">&#xe633;</div></div>
   <div class="header-input"><span class="iconfont">&#xe651;</span>输入城市</div>
   <router-link to="/city">
   <div class="header-right">{{this.$store.state.city}}<span class="iconfont arrow-icon">&#xe68a;</span></div>
   </router-link>

 </div>
</template>

<script>
export default {
  name: 'HomeHeader',
}

</script>

<style lang="stylus"  scoped >
  .header
  	display:flex
  	background: #00bcd4
  	color:#fff
  	line-height:.86rem
    a{
      color:#fff
    }
  	.header-left
  		width:.64rem
  		float:left
  		.return-icon
  			margin-left:.05rem
  			text-align:center
  			font-size:.4rem
  	.header-input
  		flex:1
  		height:.64rem
  		line-height:.64rem
  		margin-top:.12rem
  		margin-left:.2rem
  		background:#fff
  		border-radius:.1rem
  		color:#ccc
  		padding-left:0.13rem
  	.header-right 
  		min-width:1.04rem
      padding-left:.1rem  
  		float:right
  		text-align:center
      

</style>
